<template>
  <!-- 已登录 -->
  <div v-if="isLogin" class="user-center">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <van-cell center class="member">
        <template #icon>
          <van-image :src="avatar" width="80px" height="80px" round class="user-avatar"></van-image>
        </template>
        <template #title>
          <span class="username">{{ user.name }}</span>
        </template>
        <template #label>
          <span class="welcome">欢迎回来~</span>
        </template>
      </van-cell>
    </div>
    
    <!-- 功能列表 -->
    <div class="function-list">
      <van-cell 
        v-for="(item, i) of cellItems" 
        :key="i" 
        :icon="item.img" 
        :title="item.title" 
        is-link
        :to="{name:item.name}"
        class="function-item"
      />
      <van-cell 
        @click="onClickLogout" 
        icon="user-o" 
        title="退出登录" 
        is-link
        class="logout-btn"
      />
    </div>
  </div>
  
  <!-- 未登录 -->
  <div v-else class="user-center">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <van-cell center class="member" is-link to="login">
        <template #icon>
          <van-image :src="avatar_default" width="80px" height="80px" class="user-avatar"></van-image>
        </template>
        <template #title>
          <span class="username">登录 / 注册</span>
        </template>
        <template #label>
          <span class="login-tip">点击登录享受更多服务</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
  import { getTokenLocal, getUserLocal,removeTokenLocal} from "@/utils/auth.js"
  import {
    getDetailByIdAPI
  } from "@/api/user.js";
  export default {
    data() {
      return {
        user:{},
        avatar_default: require("@/assets/images/avatar_default.png"),
        avatar: "",
        isLogin:false,
        cellItems: [{
            title: "我的订单",
            name: "orderList",
            img: "orders-o",
          },
          {
            title: "收货地址",
            name: "addressList",
            img: "envelop-o",
          },

          {
            title: "我的收藏",
            name: "working",
            img: "point-gift-o",
          },
          {
            title: "个人资料",
            name: "profile",
            img: "user-o",
          },
          {
            title: "修改密码",
            name: "updatePwd",
            img: "records",
          },
        ],
      };
    },

    //初始页面数据
    mounted() {			
      this.user = getUserLocal();
      this.avatar = this.avatar_default;
      
      //判断是否用户登录，看Token是否为空
      //let token = this.$store.getters["user/getToken"];
      let token = getTokenLocal();
      this.isLogin = token ? true : false;
      
      if (this.isLogin) {
        getDetailByIdAPI(this.user.id).then(result => {
          this.avatar = this.APIDomainName + result.data.avatar;
        }).catch(() => {});
      }
    },

    methods: {
      //点击用户退出事件
      onClickLogout() {
        removeTokenLocal();
        this.avatar = this.avatar_default;
        this.$toast("退出成功");
        this.isLogin =  false;
        // this.$store.dispatch("user/logout").then(() => {
        //  this.avatar = this.avatar_default;
        //  this.$toast("退出成功");
        // });
      },
    },
  };
</script>

<style lang="less" scoped>
.user-center {
  padding: 20px;
  background-color: #f9f9f9;
}

.user-card {
  margin-bottom: 20px;
}

.member {
  margin-top: 15px;
  padding: 20px;
  background: linear-gradient(90deg, #28a2ff, #ffd787);
  box-shadow: 0 0.1rem 0.25rem #f8e3c6;
  border-radius: 10px;
}

.username {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.welcome {
  font-size: 14px;
  color: #666;
}

.function-list {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.function-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background-color: #f5f5f5;
  }
}

.logout-btn {
  padding: 15px;
  color: red;
  transition: all 0.3s ease;

  &:hover {
    background-color: #f5f5f5;
  }
}

.login-tip {
  font-size: 14px;
  color: #666;
}
</style>